---
id: checkbox
title: Checkbox
sidebar_label: Checkbox
---

Checkboxes are used for selection from multiple options. They can be toggled between checked, unchecked, and an intermediate state.

## Usage

To use the `Checkbox`, import it from your components and pass the `checked`, `onCheckedChange`, and optionally, `disabled`, `size`, and `color` props.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Checkbox

A simple checkbox with minimal configuration.

import CheckboxBasicDemo from '../../samples/components/checkbox/checkbox_basic';
import CheckboxBasicSource from '!!raw-loader!../../samples/components/checkbox/checkbox_basic';

<CodeSample>
    <CheckboxBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{CheckboxBasicSource}</CodeBlock>

## Checkbox with Indeterminate State

A checkbox that showcases the indeterminate state, typically used for 'select all' scenarios where not all sub-selections are made.

import CheckboxIndeterminateDemo from '../../samples/components/checkbox/checkbox_indeterminate';
import CheckboxIndeterminateSource from '!!raw-loader!../../samples/components/checkbox/checkbox_indeterminate';

<CodeSample>
    <CheckboxIndeterminateDemo/>
</CodeSample>

<CodeBlock language="tsx">{CheckboxIndeterminateSource}</CodeBlock>

## Checkbox Sizes

Illustrating how to use different sizes for the checkbox component.

import CheckboxSizeDemo from '../../samples/components/checkbox/checkbox_sizes';
import CheckboxSizeSource from '!!raw-loader!../../samples/components/checkbox/checkbox_sizes';

<CodeSample>
    <CheckboxSizeDemo/>
</CodeSample>

<CodeBlock language="tsx">{CheckboxSizeSource}</CodeBlock>

## Checkbox Colors

Demonstrates usage of the `color` prop to customize the checkbox appearance.

import CheckboxColorDemo from '../../samples/components/checkbox/checkbox_colors';
import CheckboxColorSource from '!!raw-loader!../../samples/components/checkbox/checkbox_colors';

<CodeSample>
    <CheckboxColorDemo/>
</CodeSample>

<CodeBlock language="tsx">{CheckboxColorSource}</CodeBlock>
